<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Daum 지도 API v3 예제: 기본 지도 생성하기</title> 
<style type="text/css">
a:link{text-decoration: none;}
a:VISITED{text-decoration: none;}
a:ACTIVE{text-decoration: none;}
a:HOVER{color:red; text-decoration: none;}
span{
 color: #ff0000;
}
*{
 font-size: 12px; 
}
</style>
<script type="text/javascript" src="httpRequest.js"></script>
<script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?apikey=f227c0296509844e77d5068b8e543da549e35e45" charset="utf-8"></script> 
<script type="text/javascript"> 
	var map;    //지도객체
	var layerArr = [];
	function init() {
		map = new daum.maps.Map(document.getElementById('map'), {
			center: new daum.maps.LatLng(37.440843801930384,127.14749505729776),
			level: 3
		});
	}
	//+++++ 마커와 인포창을 추가한다
	function addMarker() {
		var coord = new daum.maps.LatLng(37.440843801930384,127.14749505729776);
		var marker = new daum.maps.Marker({position: coord});
		var infowindow = new daum.maps.InfoWindow({content: '덩기덕 쿵덕!!!'});
		infowindow.open(map, marker);
		marker.setMap(map);
		layerArr.push(marker);
		layerArr.push(infowindow);
		map.setCenter(coord);
	}
	//+++++ 아이콘 추가하기
	function addIcon() {
		var coord = new daum.maps.LatLng(37.440343801930384,127.14749505729776);
		var icon = new daum.maps.MarkerImage(
				'http://localimg.daum-img.net/localimages/07/2009/map/icon/blog_icon01_on.png',
				new daum.maps.Size(31, 34),
				new daum.maps.Point(16,34),
				"poly",
				"1,20,1,9,5,2,10,0,21,0,27,3,30,9,30,20,17,33,14,33"
	    );
	   var marker = new daum.maps.Marker({position: coord,image:icon});
	   marker.setMap(map);
	   layerArr.push(marker);	
	   map.setCenter(coord);
	}
	function countObject(){
		alert(layerArr.length+"개");
	}
	//+++++ 폴리라인 추가하기
	function addPolyline() {
		var line = new daum.maps.Polyline();
		line.setPath([
					new daum.maps.LatLng(37.44107826871596,127.13997857396662),   
					new daum.maps.LatLng(37.43996726126592,127.1404894517663),   
					new daum.maps.LatLng(37.440461066093135,127.14146670898131),   
					new daum.maps.LatLng(37.441342812270065,127.14098915374119),   
					new daum.maps.LatLng(37.44154562560709,127.14161104785283),   
					new daum.maps.LatLng(37.44060215776297,127.14203307807),   
					new daum.maps.LatLng(37.44085788524944,127.14303255274122),   
					new daum.maps.LatLng(37.44185425330056,127.14254388889515)   
		             ]);
		line.setMap(map);
		layerArr.push(line);
		map.setCenter(line.getPath()[0]);
	}
	//+++++ 원 추가하기
	function addCircle() {
		var center =  new daum.maps.LatLng(37.440843801930384,127.14749505729776);
		var circle = new daum.maps.Circle({
			center : center,
			radius : 200,
			strokeWeight : 4,
			strokeColor : "#00ff00"
		});
		circle.setMap(map);
		layerArr.push(circle);	
		map.setCenter(center);
	}
	//+++++ 폴리곤 그리기
	function addPolygon() {
		var arr = [];
		arr.push(new daum.maps.LatLng(37.44107826871596,127.13997857396662));
		arr.push(new daum.maps.LatLng(37.43996726126592,127.1404894517663));
		arr.push(new daum.maps.LatLng(37.440461066093135,127.14146670898131));
		arr.push(new daum.maps.LatLng(37.441342812270065,127.14098915374119));
		var polygon = new daum.maps.Polygon({
			strokeWeight : 3,
			strokeColor : "#1833e5",
			strokeOpacity : 0.6,
			fillColor : "#1833e5",
			fillOpacity : 0.2
		});
		polygon.setPath(arr);
		polygon.setMap(map);
		layerArr.push(polygon);	
		map.setCenter(arr[0]);
	}
	//+++++ 지명좌표변환  ++++++++++++++++
	var checkFirst = false;
	var lastKeyword = '';
	var loopSendKeyword = false;
	
	
	function checkStr() {
		  if (checkFirst == false) {
		   //0.5초 후에 sendStr()함수 실행
		   setTimeout("sendStr();", 500);
		   loopSendKeyword = true;
		  }
		  checkFirst = true;
	}

	function sendStr() {
		  if (loopSendKeyword == false) return;
		  var keyword = document.getElementById('searchkey').value;
		  if (keyword == '') {
		   lastKeyword = '';
		   document.getElementById('result').innerHTML = '';
		   //document.getElementById('checkMsg').style.color = "black";
		   document.getElementById('checkMsg').innerHTML = "검색어를 입력하세요.";
		  } else if (keyword != lastKeyword) {
			  lastKeyword = keyword;
			  if (keyword != '') {
				  // var params = "id="+encodeURIComponent(keyword);
		          //alert(keyword);
		          sendRequest("searchAddr.jsp?str="+encodeURIComponent(keyword), null, displayResult, 'post');
		      } else {}
		  }
		  setTimeout("sendStr();", 500);
	}
	function displayResult() {
		  if (httpRequest.readyState == 4) {
			  if (httpRequest.status == 200) {
				  var resultText = httpRequest.responseText;
		          //alert(resultText);
		          document.getElementById('result').innerHTML = resultText;
		          
		          if(resultText.length > 1){
		        	  document.getElementById('checkMsg').innerHTML = "해당지역으로 이동합니다!!";
		          }
		      }else {
		    	  alert("에러 발생: "+httpRequest.status);
		      }
		  }
	}
	function movingResult(lat,lng,info){
		var coord = new daum.maps.LatLng(lat,lng);
		var marker = new daum.maps.Marker({position: coord});
		var infowindow = new daum.maps.InfoWindow({content: info});
		infowindow.open(map, marker);
		marker.setMap(map);
		layerArr.push(marker);	
		map.setCenter(coord);
	}
	//+++++ overlay된 객체를 지도에서 감춘다
	function removeLayer(){
		for(var i = 0; i < layerArr.length; i++){
			layerArr[i].setMap(null);
		}
	}
	//+++++ overlay된 객체를 지도에서 삭제한다
	function deleteLayer(){
		for(var i = 0; i < layerArr.length; i++){
			layerArr[i].setMap(null);
		}
		layerArr.length = 0;
	}
	//+++++ overlay된 객체를 지도에 표현한다
	function addLayer(){
		for(var i = 0; i < layerArr.length; i++){
			layerArr[i].setMap(map);
		}
		layerArr.length = 0;
	}
</script> 
</head> 
<body onload="init()"> 
<!-- 검색 영역 DIV -->
    <div style="width: 270px;height: 494px;border: 1px;position: fixed;left: 50px;top:30px;border:3px solid #88a6bd">
      <div style="margin-left: 15px;margin-top: 15px;	">
	      <span>basic feature</span><br />
	      <a href="javascript:countObject()">overlay된 객체의 수</a><br />
	      <a href="javascript:removeLayer()">overlay된 객체 감추기</a><br />
	      <a href="javascript:addLayer()">overlay된 객체 추가하기</a><br />
	      <a href="javascript:deleteLayer()">overlay된 객체 삭제하기</a><br />
	      <a href="javascript:addMarker()">기본마커 표시하기</a><br />
	      <a href="javascript:addIcon()">아이콘 표시하기</a><br />
	      <a href="javascript:addPolyline()">폴리라인 표시하기</a><br />
	      <a href="javascript:addCircle()">원 표시하기</a><br />
	      <a href="javascript:addPolygon()">폴리곤 표시하기</a><br />
          <hr />
	      <span id="checkMsg">주소를 입력하세요</span><br />
	      <input type=text name="searchkey" id="searchkey" onkeydown="checkStr()"><br />
	      <span id="result">
	      
	      </span>
          <hr />
      </div>
    </div>


<!-- 지도 영역 DIV -->
	<div id="map" style="width:800px;height:500px;position: fixed;top:30px;left:350px;"></div> 
</body> 
</html> 
